<form class="space-y-8" method="post" action="{{ admin_url }}/plugins/tinymce_editor/settings/save"
      onsubmit="event.preventDefault(); handleSettingsSubmit(this);">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    
    <div class="space-y-6">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">编辑器设置</h3>
            <p class="mt-1 text-sm text-gray-500">配置TinyMCE编辑器的功能和外观</p>
        </div>
        
        <div class="space-y-6">
            <!-- 基础设置 -->

            
            <!-- 插件设置 -->
            <div>
                <div class="flex justify-between items-center mb-4">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        启用的插件
                    </label>
                    <div class="space-x-2">
                        <button type="button" 
                                onclick="toggleAllPlugins(true)"
                                class="px-2 py-1 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                            全选
                        </button>
                        <button type="button" 
                                onclick="toggleAllPlugins(false)"
                                class="px-2 py-1 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                            取消全选
                        </button>
                        <button type="button" 
                                onclick="invertPluginSelection()"
                                class="px-2 py-1 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                            反选
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="plugins-container">
                    {% set available_plugins = [
                        'advlist', 'anchor', 'autolink', 'autoresize', 'autosave',
                        'charmap', 'code', 'codesample', 'directionality', 'emoticons',
                        'fullscreen', 'help', 'image', 'importcss', 'insertdatetime',
                        'link', 'lists', 'media', 'nonbreaking', 'pagebreak', 'preview',
                        'quickbars', 'save', 'searchreplace', 'visualblocks', 'visualchars',
                        'wordcount'
                    ] %}
                    {% for plugin in available_plugins %}
                    <label class="inline-flex items-center">
                        <input type="checkbox" 
                               name="plugins[]" 
                               value="{{ plugin }}"
                               {% if plugin in settings.plugins %}checked{% endif %}
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ plugin }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
        <button type="submit" 
                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none transition-colors duration-200">
            保存设置
        </button>
    </div>
</form>

<script>
// 全选/取消全选插件
function toggleAllPlugins(checked) {
    const checkboxes = document.querySelectorAll('#plugins-container input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = checked;
    });
}

// 反选插件
function invertPluginSelection() {
    const checkboxes = document.querySelectorAll('#plugins-container input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = !checkbox.checked;
    });
}

// 处理表单提交
function handleSettingsSubmit(form) {
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 显示成功消息
            showToast('success', data.message);
            // 延迟刷新页面
            setTimeout(() => window.location.reload(), 1000);
        } else {
            // 显示错误消息
            showToast('error', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('error', '保存设置失败');
    });
}

// 显示提示消息
function showToast(type, message) {
    const toast = document.createElement('div');
    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 ${
        type === 'success' ? 'bg-green-500' : 'bg-red-500'
    } text-white`;
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    // 2秒后移除提示
    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
    }, 2000);
}
</script> 